<template>
    <view
        class="title-main"
        :class="mode"
        :style="{
            padding: `${paddingTop}rpx ${padding}rpx ${paddingBottom}rpx`
        }"
    >
        <view class="flex" :class="align">
            <view class="left">
                <text class="tit" :style="[{
                    fontSize:fontSize+'px'
                }]">{{ title }}</text>
                <text class="icon-line" :style="[lineStyle]"></text>
            </view>
            <slot name="right">
                <view class="right" v-if="showRight" @tap="tapRight">
                    <slot name="right">
                        <text>更多</text>
                        <image src="/static/icon_right.png" mode="widthFix" class="icon-arrow"></image>
                    </slot>
                </view>
            </slot>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        /*
        长条 line
        圆形 circular
         */
         mode: {
             type: String,
             default: 'line'
         },
        title: {
            type: String,
            default: ''
        },
        fontSize:{
            type: [String, Number],
            default: 16
        },
        padding: {
            type: [String, Number],
            default: 30
        },
        paddingBottom: {
            type: [String, Number],
            default: 30
        },
        paddingTop: {
            type: [String, Number],
            default: 30
        },
        showRight: {
            type: Boolean,
            default: false
        },
        align: {
            type: String,
        },
        lineStyle:{
            type:Object,
             default(){
                 return {}
             },
        }
    },
    methods: {
        tapRight(){
            this.$emit('tapRight')
        },
    },
};
</script>

<style scoped lang="scss">
.title-main {
    padding: 26rpx 0;
    .icon-line{
          position: absolute;
    }
    &.circular{
        .icon-line{
            left: 0;
            top: 0;
            width: 26rpx;
            height: 26rpx;
            background: #ffecb7;
            border-radius: 50%;
            transform: translate(-5px,-2px);
        }
    }
    &.line{
        .icon-line {
            right: 0;
            bottom: 0;
            width: 66rpx;
            height: 14rpx;
            // background: $color-yel3;
             background: rgb(229, 210, 156);
            transform: translate(6px, 0);
        }
    }
    .flex {
        justify-content: space-between;
        align-items: center;
        &.center{
            justify-content:center
        }
    }
    .left {
        position: relative;
    }
    .tit {
        position: relative;
        font-size: 16px;
        font-weight: bold;
        z-index: 8;
    }
    .right {
        text {
            font-size: 14px;
            color: #999;
            vertical-align: middle;
        }
        .icon-arrow {
            vertical-align: middle;
            width: 10px;
            height: 10px;
            margin-left: 4px;
        }
    }
}
</style>
